<template>
  <div>
    <div class="title-css" style="text-align: center;padding: 20px 0;">
      用户收货地址上链
    </div>
    <div style="margin: 20px;"></div>
    <div>
      <el-form label-width="80px" :model="form">
        <el-form-item label="用户ID">
          <el-input v-model="form.id" placeholder="请输入用户ID"></el-input>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="form.address"  placeholder="请输入收货地址"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="uploadUserInfo()">确认上链</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>用户收货地址上链结果: {{ result }}</div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      form: {
        id: '',
        address: ''
      },
      result: '',     // 请求结果
    };
  },

  created() {

    // sm2Utils.js的使用代码案例
    // let publicKey = '04438cc5322504c74ad0259597e7ec3a6ff71f41328a52ce9aa6aa58c8eca44e9c9f441a37be3bf25d83eef800303f49d652902e0b09aaeb1ea40afdc3b9b25b79'
    // let privateKey = 'e6d9cc598c55fc2a053caae62db0a9ed6966b1f9cdf6b6b60f4d626528a162c9'
    // let encryptMsg = this.sm2.encryptData(publicKey, '武汉')
    // this.sm2.decryptData(privateKey, encryptMsg)

  },

  methods: {

    // 上传用户ID、用户的收货地址
    uploadUserInfo() {

      if (this.form.id === '' && this.form.address === ''){
        this.result = "请输入用户ID和收货地址!";
      } else if (this.form.id === '') {
        this.result = "请输入用户ID!";
      } else if (this.form.address === '') {
        this.result = "请输入收货地址!";
      } else {

        // 将收货地址保存
        this.$store.commit("setDestination", this.form.address)

        // 为后端拼接数据
        // 将地址数据加密
        let publicKey = '04438cc5322504c74ad0259597e7ec3a6ff71f41328a52ce9aa6aa58c8eca44e9c9f441a37be3bf25d83eef800303f49d652902e0b09aaeb1ea40afdc3b9b25b79'
        let encryptAddress = this.sm2.encryptData(publicKey, this.form.address)

        let dtoBody = {
          "basekey": this.form.id,
          "basevalue": encryptAddress
        }
        console.log("要向后端发送的数据: ", dtoBody)
        // 向后端发起post请求 将用户收货地址上链
        this.$axios.post("/setuserlocation", dtoBody).then((res) => {
          console.log(res);

          // 将创建结果绑定到页面中
          this.result = res.data.data;
        }).catch((error) => {
          this.result = "订单号错误, 请重新输入!";
          console.log(error);
          return false;
        })
      }


    },
  },
}
</script>

<style>


</style>